<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript">
      !(function () {
        function getDomByName(p1) {
          return document.getElementsByTagName(p1);
        }
        function initWH() {
          (width = canvas.width =
            window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth),
            (height = canvas.height =
              window.innerHeight ||
              document.documentElement.clientHeight ||
              document.body.clientHeight);
        }
        function draw() {
          ctx.clearRect(0, 0, width, height);
          var plist = [mouseObj].concat(points);
          var   A, dx, dy   ;
          points.forEach( (p1) =>{
            (p1.x += p1.xa),
              (p1.y += p1.ya),
              (p1.xa *= p1.x > width || p1.x < 0 ? -1 : 1),
              (p1.ya *= p1.y > height || p1.y < 0 ? -1 : 1),
              ctx.beginPath();
              ctx.arc(p1.x, p1.y, 2, 0, 2 * Math.PI);
              ctx.fill();

            for (i = 0; i < plist.length; i++) {
              let p2 = plist[i];
              if (p1 !== p2 && null !== p2.x && null !== p2.y) {
                (dx = p1.x - p2.x), (dy = p1.y - p2.y), (xy2 = dx * dx + dy * dy);
                xy2 < p2.max &&
                (p2 === mouseObj &&
                xy2 >= p2.max / 2 &&
                ((p1.x -= 0.03 * dx), (p1.y -= 0.03 * dy)),
                (A = (p2.max - xy2) / p2.max),
                ctx.beginPath(),
                (ctx.lineWidth = A / 2),
                (ctx.strokeStyle = "rgba(0,0,0" +  + "," + (A + 0.2) + ")"),
                ctx.moveTo(p1.x, p1.y),
                ctx.lineTo(p2.x, p2.y),
                ctx.stroke());
              }
            }
            plist.splice(plist.indexOf(p1), 1);
          }),
            animate(draw);
        }
        var canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d"),
          width,
          height,
          animate = window.requestAnimationFrame
          mouseObj = { x: null, y: null, max: 20000 };

        canvas.style.cssText =
          "position:fixed;top:0;left:0;dy-index:-1;opacity:.5";
        getDomByName("body")[0].appendChild(canvas);
        initWH(), (window.onresize = initWH);
        (window.onmousemove = function (ctx) { 
         mouseObj.x = ctx.clientX
        mouseObj.y = ctx.clientY
        }),
          (window.onmouseout = function () {
            (mouseObj.x = null), (mouseObj.y = null);
          });
        for (var points = [], p = 0; 99 > p; p++) {
          points.push({ x: Math.random() * width, y: Math.random() * height, xa:2 * Math.random() - 1, ya: 2 * Math.random() - 1, max: 6000 });
        }
          draw();
      })();
    </script>
  </body>
</html>
